<template>
  <div id="app">
    <el-upload
        class="upload-demo"
        ref="uploadAli"
        action="#"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :beforeUpload="beforeUpload"
        :file-list="fileList"
        :http-request="handleUpload"
        multiple
        :multiple="limit !==1"
        :accept="accept">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!--      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
<!--      <div slot="tip" class="el-upload__tip">只能上传{{ accept }}文件，且不超过20MB</div>-->
    </el-upload>
  </div>
</template>

<script>

import { put, signatureUrl, getFileNameUUID } from '@/utils/ali-oss'
import request from "@/utils/request";
export default {
  name: 'AliUpload',
  props:{
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    limit: {
      type: Number,
      default: 10
    },
    filePath: {
      type: String,
      default: 'pdf_files'
    },
    accept: {
      type: String,
      default: '.pdf'
    }
  },
  data(){
    return {
      // headers: {}, //请求token
      // data: {}, //上传时候携带的参数
      // token: '', //上传时候的token
      // canUploadType: [ //可上传的文件类型
      //   'image/png',
      //   'image/jpeg',
      //   'application/pdf', //pdf
      // ],
      fileList:[]
    }
  },
  watch: {
    value(val) { this.fileList = val }
  },
  mounted() {
    // this.token = this.$route.query.token;
    // this.headers.token = this.token
  },
  methods: {
    getFileName(name){
      return  name.substring(name.lastIndexOf("."));//.txt
    },
    beforeUpload(file) {
      // 限制上传类型
      // const fileExtensions = this.getFileName(file.name) === '.doc' || this.getFileName(file.name) === '.docx' || this.getFileName(file.name) ==='.pdf'
      //限制的上限为20M
      const max20M = file.size / 1024 / 1024 < 20;
      // if (!fileExtensions) {
      //   this.$message.error('上传文件类型只能是 .doc, .docx, .pdf 格式!');
      // }
      if (!max20M) {
        this.$message.error('上传文件大小不能超过 20MB!');
      }
      return max20M;
      // return fileExtensions && max20M;
    },
    handleUpload(option) {
      // 获取文件的后缀名
      // let objName = getFileNameUUID()
      var obj = option.file.name
      var index = obj.lastIndexOf(".");
      obj = obj.substring(index,obj.length);
      // 生成的文件名，保留文件后缀名，进行拼接
      let objName = getFileNameUUID() + this.getFileName(option.file.name)
      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      put(`${this.filePath}/${objName}`, option.file).then(putRes => {
        console.log(putRes,'putRes')
        if(putRes.res.statusCode == 200) {
          this.fileList.push({
            name:option.file.name,
            url:putRes.url
          })
          this.$emit('input', this.fileList)
        }
        // 上传成功之后，转换真实的地址
        // signatureUrl(`flieName/${objName}`).then(signatureRes => {
        //   console.log(signatureRes)
        //
        // })
      })
    },
    // submitUpload() {
    //   this.$refs.uploadAli.submit();
    // },
    handleRemove(file, fileList) {
      this.fileList = fileList
      if(file.id){
        request({
          url: `/api/Jiushi/Customerattachment/${file.id}`,
          method: 'delete',
        }).then((res) => {
        })
      }
      this.$emit('input', this.fileList)
    },
    handlePreview(file) {
      // 点击下载文件
      if (!file.id) return
      if(file.url.indexOf('http')>-1){
        window.open(file.url)
      }else{
        window.open(this.define.comUrl + file.url)
      }
    }
  }

}
</script>
